<%--
  Created by IntelliJ IDEA.
  User: 91658
  Date: 2018/6/8
  Time: 10:20
  新增收入细项
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>新增收入细项</title>
    <%@ include file="../common/common.jsp" %>
    <script type="text/javascript" src="/js/jquery-form.js"></script>
    <style>
        body{
            overflow-x: hidden;
            overflow-y: auto;
            background: #dddddd;
        }
        .color-span{
            display: inline-block;
            width: 80px;
            height: 25px;
            line-height: 27px;
            text-align: center;
        }
        .form-tip{
            position: absolute;
            top: 13%;
            left: 40%;
            font-size: 17px;
            color: red;
            display: none;
        }
    </style>
</head>
<body>
<div>
    <div style="height: 40px;line-height: 40px;padding-left: 15px;padding-top: 20px;">
        <label style="font-size: 23px;">新增收入细项</label>
        <div style="float: right;margin-top: -17px;">
            <a id="btn-closepop">
                <i class="layui-icon layui-icon-close" style="margin-right: 15px;font-size: 30px;"></i>
            </a>
        </div>
    </div>
    <div style="margin: 30px;height: 60%;">
        <form class="layui-form" id="incomeForm" action="/income/add_income" method="post" onsubmit="return false;">
            <div class="layui-form-item">
                <label class="layui-form-label">收入名称</label>
                <div class="layui-input-block">
                    <input type="text" name="incomeName" placeholder="请输入名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="line-height: 35px;">
                <div class="layui-inline">
                    <%--<label class="layui-form-label" style="height: 60%;">颜色</label>--%>
                    <c:forEach items="${colorList}" var="color">
                        <span class="color-span" style="background-color: ${color.colorCode}">${color.colorCode}</span>
                    </c:forEach>
                    <input type="hidden" value="" name="color">
                </div>
            </div>
        </form>
    </div>
    <div style="position: absolute;top: 86%;left: 35%;">
        <button class="layui-btn" id="addIncomeBtn">提交</button>
        <button class="layui-btn layui-btn-primary" id="resetBtn">重置</button>
    </div>
</div>
<div class="form-tip">
    <label>请完善表单信息</label>
</div>
</body>
<script type="text/javascript">
    layui.use(['form'], function(){
        var form = layui.form;

        $(".color-span").click(function () {
            var spans = $(".color-span");
            for (var i = 0; i < spans.length; i++) {
                var _span = spans[i];
                $(_span).css("border", "");
            };
            $(this).css("border","2px solid");
            $("input[name='color']").val($(this).text());
        });

        $("#btn-closepop").click(function() {
            parent.closePopPage(); // 提交表单后 用这个方法   调用 父框架的a() 执行切换效果
        });

        $("#addIncomeBtn").click(function () {
            $("#incomeForm").ajaxSubmit({
                beforeSubmit:function () {
//                    console.log('我在提交表单之前被调用!');
                    var incomeName = $("input[name='incomeName']").val();
                    var color = $("input[name='color']").val();
                    if (incomeName === '' || color === '') {
                        $(".form-tip").fadeIn("slow");
                        $(".form-tip").fadeOut(3000);
                        return false;
                    }
                },
                success:function (data) {
//                    console.log('我在提交表单之后被调用!');
                    var result = eval('(' + data + ')');
                    if (result.status === 1) {
                        parent.closePopPage();
                        parent.showSuccessMsg();
                        parent.location.reload();
                    }
                    if (result.status === 2) {
                        console.log("fail...");
                    }
                }
            });
        });

        $("#resetBtn").click(function () {
            $("input[name='incomeName']").val("");
            var spans = $(".color-span");
            for (var i = 0; i < spans.length; i++) {
                var _span = spans[i];
                $(_span).css("border", "");
            };
            $("input[name='color']").val("");
        });
    });
</script>
</html>
